<template>
	<div class="activity">
		<header>
			<div class="banner">
				<template v-if="openState()">
					<div class="btn_area">
						<a href="javascript:;" class="btn_share1" @click="mainShare()"><em></em>分享活动</a>
					</div>
				</template>
				<template v-else>
					<div class="btn_area">
						<!--未开通-->
						<a href="javascript:;" class="btn_share" @click="mainShare()"><em></em>分享活动</a>
						<a href="javascript:;" class="btn_open" @click="openright()"><em></em>立即开通</a>
					</div>
				</template>

				<p class="time">06月19日-08月31日</p>
			</div>
			<div class="permsg">
				<div class="score">{{stuscore}}</div>
				<div class="rank">{{sturank}}</div>
			</div>
		</header>
		<div class="content">
			<div class="btn_luzhi" @click="luzhi()"></div>
			<div class="title_tip">奖品介绍</div>
			<!--礼品介绍-->
			<div class="intrduce">
				<ul>
					<li>
						<img src="./img/iPad.png" alt="" />
						<p class="award">
							一等奖
						</p>
						<p>ipad</p>
					</li>
					<li>
						<img src="./img/bg.png" alt="" />
						<p class="award">
							二等奖
						</p>
						<p>迪斯尼拉杆书包</p>
					</li>
					<li>
						<img src="./img/zhili.png" alt="" />
						<p class="award">
							三等奖
						</p>
						<p>智力拼图</p>
					</li>
					<!--<li>
						<img src="./img/btz.jpg" alt="" />
						<p class="award">
							四等奖
						</p>
						<p>笔套装</p>

					</li>
					<li>
						<img src="./img/bi.jpg" alt="" />
						<p class="award">
							纪念品
						</p>
						<p>笔</p>
					</li>-->
				</ul>
			</div>
			<!--活动规则-->
			<div class="rule">
				<div class="rule_con">
					<label>活动规则</label>
					<p>1、本次活动对象为河南省所有用户（包含未开通用户）</p>
					<p>2、已开通用户首次参与活动赠送1000积分，每个账号只记录一次</p>
					<p>3、所有学生可通过录制分享作品，获得投票参与得分(每天录制分享一篇课文可获得100积分，分享作品获得票数可对应加分）</p>
					<p>4、累计积分参与排名或抽奖</p>
					<ul>
						<li>抽奖奖品</li>
						<li>一等奖：ipad</li>
						<li>二等奖：宝视达护眼灯</li>
						<li>三等奖：美琪儿娃娃</li>
						<li>四等奖：卡通水笔组合</li>
					</ul>
					<ul>
						<li>排名奖品</li>
						<li>第一名：ipad</li>
						<li>第2-4名：迪斯尼拉杆书包</li>
						<li>第5-10名：智力拼图</li>
					</ul>

					<p>5、用户通过抽奖可消耗积分，抽奖一次用户积分减少500</p>
					<p>6、活动期间已开通用户参与活动获得积分X2，未开通用户获得积分X1</p>
					<p>7、活动礼品兑换会在15个工作日内配送，礼品以学校为单位进行统一配送。图片仅供参考，最终解释权归同步课堂所有，如有问题请联系在线客服：12556185</p>
					<p>8、活动时间 2017年6月19日 — 2017年8月31日</p>
				</div>
			</div>
		</div>
	</div>
</template>
<script type="text/ecmascript-6">
	import searchToMap from '@/utils/searchToMap'
	export default {
		data() {
			return {
				openstate: this.$store.state.opendate || localStorage.getItem('opendate'),
				winrecord: [], //我的中奖记录
			}
		},
		created() {
			var search = searchToMap();
			if(search && search.tbkt_token) {
				this.$store.commit('saveStuMsg', search);
				localStorage.setItem('opendate', search.opendate);

			}
			this.$store.commit('hiderank');
			this.$store.commit('hidebonus');
			this.$store.commit('showact');
			this.$store.commit('showfooter');
			console.log(this.openstate)
			this.$http.get(domain + '/API/SummerAct/GetSortByInte', {
				params: {
					'intUserID': this.$store.state.stu_id || search.stu_id,
					'intType': 0,
					'intcityID': this.$store.state.city_id || search.city_id
				}
			}).then(res => {
				let stumsg = res.body[0];
				if(!stumsg) return;
				this.$store.commit('changeStuMsg', stumsg);
			})
			this.$http.get(domain + '/API/SummerAct/AddIntegralToTea', {
				params: {
					'intStuID': this.$store.state.stu_id,
					'strStuName': this.$store.state.stu_name,
					'intClassID': this.$store.state.class_id,
					'strOpenDate': this.$store.state.opendate,
					'strLoginTime': new Date().Format('yyyy-MM-dd hh:mm:ss'),
					'intTeaID': this.$store.state.tea_id,
					'strTeaName': this.$store.state.tea_name,
					'intSID': this.$store.state.school_id,
					'strSName': this.$store.state.school_name,
					'intcityID': this.$store.state.city_id
				}

			}).then(res => {
				let isfirstLogin = res.body.firstlogin;
				if(isfirstLogin == true) {
					layer.tips("开通成功！获得 1000 积分")
				}
			})
		},
		methods: {
			luzhi() {
				this.$router.push('/record');
			},
			openState() {
				console.log(this.openstate);
				return this.openstate ? true : false;
			},
			openright() {
				location.href = comweb + '/open/2/code?tbkt_token=' + this.$store.state.token;
			},
			mainShare(){
				var _url="http://www.tbkt.cn/yd_login/?wap=1%20?location=0";
				var title='';
				this.$http.post(mapihd + '/huodong/sx_summer/s/award/detail', {
					'app_id': 43
				}).then(res => {
					let dt = res.body;
					if(dt.response == 'ok') {
						let rl = dt.data.my_award;
						let pl = dt.data.all_award;
						let rl_text=rl[rl.length-1][1];
						if(rl.length>0){
							title="太棒了，我在同步课堂 '暑假作业大作战！'活动中抽中了"+rl_text+"大奖，你也来试试？http://www.tbkt.cn/yd_login/?wap=1%20?location=0"
						}else{
							title='缤纷暑假赢大奖，ipad壕礼抽不停！快来参加同步课堂暑假活动吧。http://www.tbkt.cn/yd_login/?wap=1%20?location=0'					
						}
					}
				});
				layer.tips(title);
				try {
					appobject.Interactive("ys_share," + _url + "|" + title);
				} catch(e) {
					layer.tips('PC端不支持此功能');
					return;
				}
				this.$http.get(domain + '/API/SummerAct/ShareRecord', {
					params: {
						'intStuID': this.$store.state.stu_id,
						'strStuName': this.$store.state.stu_name,
						'intClassID': this.$store.state.class_id,
						'strOpenDate': this.$store.state.opendate,
						'strShareTime': new Date().Format('yyyy-MM-dd hh:mm:ss'),
						'intSID': this.$store.state.school_id,
						'strSName': this.$store.state.school_name,
						'intcityID': this.$store.state.city_id
					}
				}).then(res => {
					let stumsg = res.body[0];
					if(stumsg == true) {
						layer.tips("分享成功，获得100积分")
					} else {
						layer.tips("分享成功")
					}
				})

			}
		},
		computed: {
			stuscore() {
				return this.$store.state.stu_jifen
			},
			sturank() {
				return this.$store.state.stu_paiming
			}
		}

	}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	@import "../../assets/scss/common";
	.activity {
		background: #f5ddb9;
	}
	
	.step_text {
		width: 100%;
		margin-top: 116px/$ppr;
		text-align: center;
		font-size: 36px/$ppr;
		color: #fff278;
		label {
			color: #FFFFFF;
		}
	}
	
	.ght180 {
		height: 100px/$ppr;
	}
	
	.content {
		width: 100%;
		min-height: 753px/$ppr;
		padding-bottom: 150px/$ppr;
		background: #6ed8f3;
		position: relative;
		.btn_luzhi {
			position: absolute;
			width: 254px/$ppr;
			height: 194px/$ppr;
			background: url('./img/btn_luzhi.png');
			background-size: 254px/$ppr 194px/$ppr;
			left: 50%;
			transform: translateX(-50%);
			top: -200px/$ppr;
			z-index: 2;
		}
		.title_tip {
			width: 100%;
			height: 92px/$ppr;
			background: url(img/txt_bg.png) no-repeat center;
			background-size: 100% 92px/$ppr;
			font-size: 36px/$ppr;
			color: #fff;
			text-align: center;
			line-height: 92px/$ppr;
			font-weight: bold;
		}
		.intrduce {
			&:after {
				content: '';
				display: table-cell;
				float: left;
			}
			width: 100%px/$ppr;
			height: 330px/$ppr;
			background: transparent;
			position: relative;
			left:0;
			top: 0px/$ppr;
			ul {
				padding-top: 30px/$ppr;
				li {
					width: 33%;
					float: left;
					text-align: center;
					margin-bottom: 45px/$ppr;
					img {
						width: 160px/$ppr;
						height: 160px/$ppr;
						background: green;
						border-radius: 10px/$ppr 10px/$ppr 0 0;
					}
					p.award {
						font-size: 24px/$ppr;
						text-align: center;
						color: #f39704;
						width: 160px/$ppr;
						height: 50px/$ppr;
						line-height: 50px/$ppr;
						background: #c9f4ff;
						margin: -10px/$ppr auto 0;
						border-radius: 0 0 10px/$ppr 10px/$ppr;
					}
					p {
						font-size: 28px/$ppr;
						color: #c9f4ff;
						width: 160px/$ppr;
						text-align: center;
						margin: 20px/$ppr auto 0;
						font-weight: bold;
						line-height: 48px/$ppr;
					}
				}
			}
		}
		.rule {
			width: 660px/$ppr;
			min-height: 525px/$ppr;
			background: #1fb0d3;
			border-radius: 20px/$ppr;
			margin: 20px/$ppr auto;
			position: relative;
			.rule_con {
				padding: 35px/$ppr 30px/$ppr 40px/$ppr;
				box-sizing: border-box;
				font-size: 24px/$ppr;
				color: #cbf1fb;
				>label {
					font-size: 36px/$ppr;
					color: #fff;
					text-align: center;
					font-weight: bold;
					margin: 0 auto 35px/$ppr;
					width: 100%;
					display: block;
					clear: both;
				}
				p {
					word-break: break-word;
					margin-bottom: 30px/$ppr;
					line-height: 1.5;
				}
				ul {
					margin-bottom: 30px/$ppr;
					width: 50%;
					float: left;
					line-height: 1.5;
					height: 180px/$ppr;
				}
			}
		}
	}
</style>